<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 颜色选择 -->
    <form action="">
        <div>
            颜色选择：<input type="color" name="color">
        </div>
        <div>
            邮箱：<input type="email" name="email">
        </div>
        <div>
            url地址(完整地址)：<input type="url" name="url">
        </div>
        <div>
            <!-- 手机端浏览器有用 -->
            电话号码：<input type="tel" name="tel">
        </div>
        <div>
            日期选择：<input type="date" name="date">
            月份选择：<input type="month" name="month">
            周数选择：<input type="week" name="week">
            选取本地时间：<input type="datetime-local" name="datetime-local">
        </div>
        <div>
            <!-- step    步长（取数永远是整数）-->
            滑块效果：<input type="range" name="range" min="100" max="200" value="100" step="10">
        </div>
        <div>
            数字类型：<input type="number" name="number" min="0" max="10" value="4" step="2">
        </div>
        <div>
            搜索：<input type="search" name="search">
        </div>

        <input type="submit">
    </form>
</body>
</html>